<div class="row">
  <div class="col-md-8 col-sm-10 col-sm-push-1 col-md-push-2">
    <form action="#" method="post" class="form form-horizontal" [formGroup]="siteRangeForm">
      <div class="one-form-header"></div>
      <div class="one-form-body">
        <div class="form-group">
          <label class="col-sm-4 control-label"><span style="color: red;">*</span> 行政区划:</label>
          <div class="col-sm-8 ">
            <input type="hidden" id="id" formControlName="id" name="id">
            <nz-cascader
              nzSize="large"
              nzPlaceHolder = "请选择行政区划"
              [nzOptions] = "regionsArr"
              nzLabelProperty = 'name'
              nzValueProperty = 'id'
              [nzChangeOnSelect] = 'true'
              (nzSelectionChange) = 'regionChange($event)'
              [formControlName]="'regionCode'"
            >
            </nz-cascader>
            <!--<input type="text" class="form-control" id="pId"  formControlName="pId" maxlength="16" minlength="3">-->
            <!--[(ngModel)]="values"-->
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label"><span style="color: red;">*</span> 区间名称:</label>
          <div class="col-sm-8 ">
            <nz-dropdown id="address"
                         nzTrigger="click"
                         style="width: 100%;">
              <nz-input [formControlName]="'rangeName'"
                        (keyUp.enter) = 'changeSearch()'
                        (nzBlur) = 'changeSearch()'
                        nz-dropdown  nzSize="large"
                        nzPlaceHolder="输入新名称或下拉选择历史名称">
                <ng-template #suffix>
                  <i class="fa fa-angle-down"></i>
                </ng-template>
              </nz-input>
              <ul nz-menu>
                <li nz-menu-item *ngFor="let option of historyAddrArr" (click)="changeSearch(option)">
                  {{option.rangeName}}
                </li>
              </ul>
            </nz-dropdown>
          </div>
        </div>
        <div class="form-group">
          <label for="startDate" class="col-sm-4 control-label"><span style="color: red;">*</span> 监测开始时间:</label>
          <div class="col-sm-8 ">
            <nz-datepicker
              style="width: 100%;" nzSize="large" id="startDate"
              (ngModelChange)="siteRangeForm.value.startDate=$event;startValueChange()"
              [nzDisabledDate]="disabledStartDate"
              [nzShowTime] = 'true'
              [nzFormat]='"YYYY-MM-DD HH:mm:ss"'
              [formControlName]="'startDate'"
              [nzPlaceHolder]="'开始时间'"></nz-datepicker>
          </div>
        </div>
        <div class="form-group">
          <label for="endDate" class="col-sm-4 control-label"><span style="color: red;">*</span> 监测结束时间:</label>
          <div class="col-sm-8 ">
            <nz-datepicker
              style="width: 100%;" nzSize="large" id="endDate"
              (ngModelChange)="siteRangeForm.value.endDate=$event;endValueChange()"
              [nzDisabledDate]="disabledEndDate"
              [nzShowTime] = 'true'
              [nzFormat]='"YYYY-MM-DD HH:mm:ss"'
              [formControlName]="'endDate'"
              [nzPlaceHolder]="'结束时间'"></nz-datepicker>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label" ><span style="color: red;">*</span> 类型:</label>
          <div class="col-sm-8 ">
            <nz-select style="width: 100%;" nzSize="large"
                       nzAllowClear
                       (nzOpenChange) = 'modeChange($event)'
                       [formControlName]="'modeType'">
              <nz-option nzLabel="--请选择类型--" nzValue=""></nz-option>
              <nz-option
                *ngFor="let modeType of modeTypeArr"
                [nzLabel]="modeType.display"
                [nzValue]="modeType.value"
              >
              </nz-option>
            </nz-select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label" ><span style="color: red;">*</span> 空气数据源:</label>
          <div class="col-sm-8 ">
            <nz-select style="width: 100%;" nzSize="large"
                       nzAllowClear
                       (nzOpenChange) = 'modeChange($event)'
                       [formControlName]="'airType'">
              <nz-option nzLabel="--请选择空气数据源--" nzValue=""></nz-option>
              <nz-option
                *ngFor="let source of airTypeArr"
                [nzLabel]="source.display"
                [nzValue]="source.value"
              >
              </nz-option>
            </nz-select>
          </div>
        </div>
        <div class="form-group" *ngIf="siteRangeForm.value.modeType === '0'">
          <label for="longitude" class="col-sm-4 control-label"> 定点经纬度:</label>
          <div class="col-sm-8 ">
            <input type="text" class="form-control" id="longitude"
                   formControlName="longitude" readonly
                   placeholder="拖动下图的图标选择经纬度">
            <div *ngIf="formErrors.longitude" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.longitude}} </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="character_add_describe" class="col-xs-4 control-label"> 位置:</label>
          <div class="col-xs-8">
            <textarea rows="2" cols="20"  placeholder="位置" id="character_add_address" style="width:100%;border-radius: 3px;margin-top: 3px;padding: 5px;" name="description" formControlName="address" (nzBlur) = 'changeSearch()'></textarea>
            <div *ngIf="formErrors.address" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.address}} </label>
            </div>
          </div>
        </div>
        <div class="form-group" [style.display]="siteRangeForm.value.modeType === '0'? 'block': 'none'" #addressMap>
          <label for="addressMap" class="col-sm-4 control-label"> 地图位置:</label>
          <div class="col-sm-8" style="height: 200px;">
            <div id="addressMap" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <!--<div class="form-group"  style="display: none;">-->
          <!--<label for="address" class="col-sm-4 control-label"> 定点纬度:</label>-->
          <!--<div class="col-sm-8 ">-->
            <!--<input type="text" class="form-control" id="latitude" formControlName="latitude">-->
            <!--<div *ngIf="formErrors.latitude" class="has-error">-->
              <!--<label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.latitude}} </label>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="row">
          <label class="col-sm-4 control-label"  >启用:</label>
          <div class="col-sm-8 ">
            <div class="row">
              <div class="col-xs-4">
                <input type="radio" id="siteCate_enable_yes" value="1" formControlName="isUse">
                <label for="siteCate_enable_yes">
                  启用
                </label>
              </div>
              <div class="col-xs-4">
                <input type="radio" id="siteCate_enable_no" formControlName="isUse" checked value="0">
                <label for="siteCate_enable_no">
                  禁用
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="character_add_describe" class="col-xs-4 control-label"> 说明:</label>
          <div class="col-xs-8">
            <textarea rows="2" cols="20"  placeholder="说明" id="character_add_describe" style="width:100%;border-radius: 3px;margin-top: 3px;padding: 5px;" name="description" formControlName="remark" maxlength="200"></textarea>
            <div *ngIf="formErrors.remark" class="has-error">
              <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.remark}} </label>
            </div>
          </div>
        </div>
      </div>
      <div class="one-form-footer">
        <div class="pull-right">
          <button class="btn btn-default" type="reset" (click)="cancelMobileDevUpdate()">取消</button>
          <button class="btn btn-success" type="button" [disabled]="!siteRangeForm.valid" (click)="onSubmit()" >提交</button>
        </div>
      </div>
    </form>
  </div>
</div>
